.transformSection {
    position: relative;
    text-align: center;
    display: grid;
    justify-content: center;
    align-items: center;
    margin: 0 0 25%;
}

.transformContainer {
    display: grid;
    place-items: center;
    width: 85vw;
    height: 32vw;
    padding: 5% 0;
    border-radius: 15px;
    background: rgb(255, 255, 255, 0.05);
    box-shadow: inset 0.05vw 0.05vw var(--brandPrimaryColor), inset -0.05vw -0.05vw var(--brandSecondaryColor);
}

.transformContainer h1 {
    font-size: 4vw;
    font-weight: 500;
    transition-delay: 0.2s;
}

.transformContainer h3 {
    margin: -10% 10%;
    font-size: var(--sectionHeading2FontSize);
    font-weight: 200;
    color: rgba(255, 255, 255, 0.7);
    transition-delay: 0.4s;
}

.transformContainer button {
    transition-delay: 0.6s;
}

.transformCircle,
.transformCircle2 {
    position: absolute;
    top: -20%;
    left: -10%;
    width: 25vw;
    height: 25vw;
    border-radius: 50%;
    opacity: 0.7;
    z-index: -2;
}

.transformCircle2 {
    top: 80%;
    left: 85%;
    width: 15vw;
    border-radius: 50% 0 0 50%;
}

.transformCircle::before {
    content: "";
    position: absolute;
    bottom: -11%;
    left: 0%;
    height: 123%;
    width: 123%;
    background: url(/assets/icons/grid-for-fubiweb.svg);
    mask-image: radial-gradient(ellipse, white 30%, transparent 75%);
    background-size: 800%;
    opacity: 0.1;
}

.transformCircle::after {
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background: var(--brandPrimaryColor);
    filter: blur(120px);
    opacity: 0.7;
}

.transformCircle2::before {
    content: "";
    position: absolute;
    bottom: 15%;
    left: -5%;
    height: 90%;
    width: 90%;
    background: url(/assets/icons/grid-for-fubiweb.svg);
    mask-image: radial-gradient(circle, white 30%, transparent 60%);
    background-size: 800%;
    transform: scale(2);
    opacity: 0.1;
}

.transformCircle2::after {
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;
    height: 70%;
    width: 90%;
    border-radius: 50% 0 0 50%;
    background: var(--brandSecondaryColor);
    filter: blur(120px);
}

/* <-------------------Mobile Device----------------------> */

@media (max-width: 600px) {
    .transformContainer {
        height: auto;
        width: auto;
        padding: 6% 0;
    }

    .transformContainer h1 {
        font-size: var(--mobileHeadingFontSize);
    }

    .transformContainer h3 {
        font-size: var(--mobileParagraphFontSize);
        margin: 3% 15% 5%;
    }

    .transformContainer button {
        font-size: 3vw;
        padding: 1.2vw 2.4vw;
        margin: 0 2% 0;
    }

    .transformCircle,
    .transformCircle2 {
        display: none;
    }
}